<template>
	<view class="categoryItem" @click="goDetail(item)">
		<view class="icon">
			<image :src="item.icon" mode="aspectFill"></image>
		</view>
		<view class="cate-name">{{item.cate_name}}{{ item.is_hide == 1 ? "(私密)" : ""}}</view>
		<view class="count">{{'主题数:' + item.total}}</view>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store/user'

	defineProps(['item'])
	const goDetail = async (item) => {
		const isLog = await useUserStore().verifyLog()
		if (!isLog && item.is_hide == 1) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		} else {
			uni.navigateTo({
				url: '/pages/category/detail?category=' + JSON.stringify(item)
			})
		}

	}
</script>

<style scoped lang="scss">
	.categoryItem {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;

		.icon {
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.cate-name {
			color: #000;
			font-size: 30rpx;
			margin: 8rpx 0;
		}

		.count {
			color: #6b7280;
			font-size: 20rpx;
		}
	}
</style>